<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            margin: auto;
        }

        .box {
            margin: 50px;
            margin-top: 0;
        }

        .box ul {

            width: 1550px;
            height: 40px;
            clear: both;
        }

        .box ul li {
            line-height: 40px;
            float: left;
            padding-left: 10px;
            border-right: 1px solid #000;
            overflow: hidden;
            white-space: nowrap;
        }

        .box ul li:nth-child(1) {
            width: 150px;
        }

        .box ul li:nth-child(2) {
            width: 290px;
        }

        .box ul li:nth-child(3) {
            width: 290px;
        }

        .box ul li:nth-child(4) {
            width: 100px;
        }

        .box ul li:nth-child(5) {
            width: 400px;
        }

        .nav ul {
            width: 600px;
            height: 40px;
            margin-left: 540px;
        }

        .nav ul li {
            float: left;
            width: 100px;
            line-height: 40px;
            text-align: center;
        }

        .page ol {
            border-collapse: collapse;
        }

        .page ol li {
            float: left;
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid black;

        }
    </style>
</head>

<body>
    <div class="nav" id="nav">
    </div>
    <div class="box">
    </div>
    <div class="page">
        <!-- <ol>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ol> -->
    </div>
    <script>
        fetch("/getOne", {
            method: "get", //请求类型 默认是get
        }).then(function (res) {
            return res.json()
        }).then((data) => {
            console.log(data);
            var str = '';
            for (let i = 0; i < data.length; i++) {
                str += `<li>${data[i].type}</li>`
            }
            fetch(`/getTwo?id=${1}&page=${1}`, {
                method: "get", //请求类型 默认是get
            }).then(function (res) {
                return res.json()
            }).then((data) => {
                var str = '';
                for (let j = 0; j < data[1].length; j++) {

                    str += `        
                            <ul>
                               <li>${data[1][j].author}</li>
                               <li>${data[1][j].created_time}</li>
                               <li>${data[1][j].labels}</li>
                               <li>${data[1][j].podcast}</li>
                               <li>${data[1][j].title}</li>
                            </ul>`
                }
                var box = document.querySelector('.box');
                box.innerHTML = str;
            })
            var nav = document.querySelector('.nav');
            nav.innerHTML = "<ul>" + str + "</ul>";
            var navullis = document.querySelector("#nav").querySelectorAll("li")
            var u = 1;
            for (let i = 0; i < navullis.length; i++) {
                navullis[i].addEventListener("click", function () {
                    u = i + 1;
                    fetch(`/getTwo?id=${u}&page=${1}`, {
                        method: "get", //请求类型 默认是get
                    }).then(function (res) {
                        return res.json()
                    }).then((data) => {
                        var str = '';
                        for (let j = 0; j < data[1].length; j++) {

                            str += `        
                            <ul>
                               <li>${data[1][j].author}</li>
                               <li>${data[1][j].created_time}</li>
                               <li>${data[1][j].labels}</li>
                               <li>${data[1][j].podcast}</li>
                               <li>${data[1][j].title}</li>
                            </ul>`
                        }
                        var box = document.querySelector('.box');
                        box.innerHTML = str;
                        // console.log(data.length);
                        var page = document.querySelector('.page');
                        var str = '';
                        for (let k = 0; k < Math.ceil(data[0].length / 50); k++) {
                            str += `<li>${k + 1}</li>`
                        }
                        page.innerHTML = "<ol>" + str + "</ol>";
                        var pagelis = document.querySelectorAll('.page>ol>li');
                        for (let a = 0; a < pagelis.length; a++) {
                            pagelis[a].addEventListener("click", function () {
                                var p = pagelis[a].innerHTML;
                                console.log(p);
                                fetch(`/getTwo?id=${u}&page=${p}`, {
                                    method: "get", //请求类型 默认是get
                                }).then(function (res) {
                                    return res.json()
                                }).then((data) => {
                                    var str = '';
                                    for (let j = 0; j < data[1].length; j++) {

                                        str += `        
                            <ul>
                               <li>${data[1][j].author}</li>
                               <li>${data[1][j].created_time}</li>
                               <li>${data[1][j].labels}</li>
                               <li>${data[1][j].podcast}</li>
                               <li>${data[1][j].title}</li>
                            </ul>`
                                    }
                                    var box = document.querySelector('.box');
                                    box.innerHTML = str;
                                })
                            })
                        }
                    })

                })

            }
            console.log(u);

        })


    </script>
</body>

</html>